<template>
	<view class="form">
		<view class="item">
			<view class="label">姓名</view>
			<view class="value">
				<uv-input border="none" v-model="state.name" placeholder="请输入姓名"></uv-input>
			</view>
		</view>
		<view class="item">
			<view class="label">微信</view>
			<view class="value">
				<uv-input border="none" v-model="state.weixin" placeholder="请输入微信"></uv-input>
			</view>
		</view>
		<view class="item">
			<view class="label">QQ</view>
			<view class="value">
				<uv-input type="number" border="none" v-model="state.qq" placeholder="请输入QQ号"></uv-input>
			</view>
		</view>
		<view class="item">
			<view class="label">手机</view>
			<view class="value">
				<uv-input border="none" v-model="state.mobile" placeholder="请输入手机"></uv-input>
			</view>
		</view>
		<view class="item">
			<uv-checkbox-group shape="circle" @change="onToggleaAreementWith">
				<uv-checkbox activeColor="#D33123" label="我已经阅读并接受" name="我已经阅读并接受"></uv-checkbox>
				<text class="tit" @click="hanldeOpenPopup">分销协议</text>
			</uv-checkbox-group>
		</view>
		<coreshop-button class="save" title="保存" @onClick="onApply()"></coreshop-button>

		<uv-popup ref="popup" mode="bottom" :round="8" :closeOnClickOverlay="false" closeable>
			<view class="popup-content">
				<view class="title">分销协议</view>
				<uv-parse :content="shopConfigStore.config?.distributionAgreement"></uv-parse>
			</view>
		</uv-popup>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { useShopConfigStore } from '@/core/store';
	import { handleShowToast, handleRouteRedirectTo } from '@/core/utils';
	import { mobile } from '@/uni_modules/uv-ui-tools/libs/function/test.js';
	import { queryApplyDistribution } from '@/core/api';
	import type { Response } from '@/core/models';

	/** 获取项目配置 */
	const shopConfigStore = useShopConfigStore();

	const popup = ref();

	const state = reactive<{
		name : null | string;
		weixin : null | string;
		qq : null | number;
		mobile : null | number;
		agreement : string;

	}>({
		name: null,
		weixin: null,
		qq: null,
		mobile: null,
		agreement: 'off',
	});

	/** 打开弹框 */
	const hanldeOpenPopup = () => {
		popup.value?.open();
	}

	/** 协议复选框 */
	const onToggleaAreementWith = (e : Array<string>) => {
		state.agreement = e.length > 0 ? 'on' : 'off';
	}

	/** 申请提交 */
	const onApply = async () => {
		if (!state.name) {
			handleShowToast('请输入姓名'); return;
		}
		if (state.name.length > 4 || state.name.length < 2) {
			handleShowToast('长度在2-4个字符之间'); return;
		}
		if (!state.weixin) {
			handleShowToast('请输入微信'); return;
		}
		if (!state.qq) {
			handleShowToast('请输入QQ'); return;
		}
		if (!state.mobile) {
			handleShowToast('请输入手机号码'); return;
		}
		if (!mobile(state.mobile)) {
			handleShowToast('手机号输入错误'); return;
		}
		if (state.agreement == 'off') {
			handleShowToast('请阅读并接受协议'); return;
		}
		const distribution : Response<any> = await queryApplyDistribution({
			name: state.name,
			weixin: state.weixin,
			qq: state.qq,
			mobile: state.mobile,
			agreement: state.agreement,
		});
		if (distribution.status) {
			handleShowToast(distribution.msg, 'success', () => {
				setTimeout(() => {
					handleRouteRedirectTo(`/pages/subpackage/distribution/apply/state`);
				}, 1500)
			});
		} else {
			handleShowToast(distribution.msg);
		}
	}
</script>

<style scoped lang="scss">
	.form {
		padding: 30rpx 25rpx;
		margin-top: 50rpx;

		.item {
			margin-bottom: 30rpx;

			.label {
				font-size: 28rpx;
				color: #292B2E;
				margin-bottom: 10rpx;
			}

			.value {
				background-color: #f3f3f3;
				border-radius: 10rpx;
				padding: 15rpx;
			}

			.tit {
				font-size: 28rpx;
				margin-left: 10rpx;
				color: #D33123;
			}
		}

		.save {
			display: block;
			margin-top: 100rpx;
		}
	}

	.popup-content {
		height: 60vh;
		overflow-y: scroll;
		padding: 0 40rpx;

		.title {
			font-size: 32rpx;
			text-align: center;
			padding: 40rpx 40rpx 30rpx;
		}
	}
</style>